<script setup>
import { onMounted, ref } from 'vue'
import { useUserStore } from '../../../store/user';
import { ElMessage } from 'element-plus';
import 'element-plus/theme-chalk/el-message.css'
import { useRouter } from 'vue-router'
import { getCaptchaApi } from '@/apis/user'
import usePasswordLoginRule from '../../../hooks/usePasswordLoginRule';

const userStore = useUserStore()

const router = useRouter()

const { rules, form } = usePasswordLoginRule()




//#region 登录方法
const formEl = ref(null)

const login = async () => {
  //将数据从form中取出来
  const { phone, password, captcha } = form.value

  //formEl是elementUI的表单对象，validate方法可以校验表单是否合法
  formEl.value.validate(async (valid) => {
    //valid是校验结果，true表示校验通过，false表示校验失败
    if (valid) {
      // 调用登录接口
      try {
        await userStore.passwordLogin({ phone, password, captcha, captchaId })
        ElMessage({ type: 'success', message: '登录成功' })
        router.push('/')
      } catch (error) {
        //将验证码清空
        form.value.captcha = ''
      }
    }
  })
}

//#endregion

// #region 获取验证码方法,需要获得会话id
const captcha = ref(null)

// 辨识码
const captchaId = Math.ceil(((Math.random() * 9 + 1) * 1000))


const getCaptcha = async () => {
  const res = await getCaptchaApi(captchaId)
  // console.log(res);

  //不用.data,就是转化res本身。

  captcha.value = window.URL.createObjectURL(new Blob([res], { type: 'image/png' }))
}



//#endregion


// 验证码刷新
const changeCaptcha = async () => {
  getCaptcha()

}

setTimeout(() => {
  // 页面刷新后，自动获取验证码
  // 
}, 1000)

// 
onMounted(() => {


  getCaptcha()

  // 页面加载完成后，自动获取验证码
  // getCaptcha()
})


</script>

<template>

  <div class="title">
    <!-- <svg-icon class="hidden-sm-and-up" name="zuojiantou"></svg-icon> -->
    <h2>欢迎( ๑╹ ꇴ╹) ｸﾞｯ! </h2>
  </div>

  <div class="login-switch">
    <router-link to="/login/passwordLogin">
      <a class="password-login active" :underline="false">密码登录</a>
    </router-link>

    <router-link to="/login/messageLogin">
      <a class="message-login" :underline="false">短信登录</a>
    </router-link>

  </div>



  <div class="form">
    <!-- :model 是elementUI的一个属性，把响应式数据form和这个表单关联在一起, :rules 是elementUI的一个属性，把这个from和一个规则对象绑定在一起-->
    <el-form :model="form" :rules="rules" ref="formEl" label-position="right" label-width="60px" status-icon>
      <!-- <el-form-item>上的prop绑定的是自己定义的规则，名字相对应  -->
      <el-form-item label-width="70px" prop="phone" label=" 手机号">
        <!-- 最终的输入框 双向绑定form中对应的字段 -->
        <el-input v-model="form.phone" @keyup.enter="login" placeholder="请输入手机号" size="large" />
      </el-form-item>
      <el-form-item label-width="70px" prop="password" label="密码 ">
        <el-input v-model="form.password" type="password" @keyup.enter="login" show-password placeholder="请输入密码"
          size="large" />
      </el-form-item>
      <!-- 验证码 -->
      <el-form-item label-width="70px" prop="captcha" label="验证码">
        <el-input class="captchaInput" v-model="form.captcha" @keyup.enter="login" placeholder="请输入验证码" size="large" />
        <img class="captcha" :src="captcha" @click="changeCaptcha">
      </el-form-item>
      <el-form-item style="width: 60%;" prop="agree" label-width="32px">
        <el-checkbox v-model="form.agree" size="large">
          我已同意隐私条款和服务条款
        </el-checkbox>
      </el-form-item>
      <!-- 按下回车键也能提交 -->
      <el-button size="large" class="subBtn" @click="login">点击登录</el-button>
      <button></button>
    </el-form>

  </div>

  <!-- 页脚 -->
  <div class="login-foot">
    <router-link to="/login/forgetPassword">
      <a>忘记密码</a>
    </router-link>
    <router-link to="/login/register">
      <a>免费注册</a>
    </router-link>
  </div>

</template>

<style lang='scss' scoped>
.form {

  .subBtn {
    width: calc(100% - 20px);
    margin-left: 20px;
    background-color: rgb(255, 98, 0);
    color: white;
  }
}


//欢迎标题
.title {
  font-size: 2rem;
  display: flex;
  align-items: center;
  margin-bottom: 2rem;

  & h2 {
    margin: 0 auto;
  }
}

.login-switch {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 2rem;
}


//登录页脚
.login-foot {
  font-size: 1.3rem;
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;

  & a:first-child {

    margin-right: 15px;
  }
}



@media screen and (min-width: 768px) {

  .password-login,
  .message-login {
    font-size: 1.6rem;
    font-weight: bold;
  }

  .captchaInput {
    position: relative;
  }

  .captcha {
    position: absolute;
    right: 0;
    top: 50px;

    &:hover {
      cursor: pointer;
    }
  }

}

@media screen and (max-width: 767px) {

  .password-login,
  .message-login {
    font-size: 1.6rem;
    font-weight: bold;
    height: 30px;
    // height: 10px;
  }

}


.active {
  color: rgb(255, 98, 0);
}
</style>